<script setup lang="ts">
const props = defineProps<{
  projectName?: string
  nodeName?: string
  state?: string
  stateTagColor?: string
  isHideCurrentNode?: boolean
  isShowWarning: boolean
}>()
</script>

<template>
  <view class="flex justify-between items-start">
    <view class="flex items-center">
      <view class="flex justify-center items-center w-88rpx h-88rpx mr-24rpx bg-brand rounded-20rpx">
        <image class="w-55rpx h-49rpx" src="@/static/images/file.png" />
      </view>
      <view class="flex flex-col">
        <view class="flex items-center">
          <view class="mb-14rpx text-30rpx font-bold text-secondary leading-30rpx">
            {{ props.projectName || '未知' }}
          </view>
          <Spacer width="4" />
          <image
            v-if="isShowWarning"
            class="flex-shrink-0 w-52rpx h-40rpx"
            src="@/static/images/warning.png"
          />
        </view>
        <view v-if="!isHideCurrentNode" class="px-16rpx py-8rpx text-28rpx leading-28rpx text-brand bg-#FFEEE2 rounded-22rpx">
          当前节点：{{ props.nodeName || '未知' }}
        </view>
      </view>
    </view>
    <view class="p-3rpx text-28rpx leading-28rpx text-brand font-bold" :style="{ color: props.stateTagColor || '' }">
      {{ props.state || '未知' }}
    </view>
  </view>
</template>
